<template>
  <div class="page-box">
    <div>
      <div class="pagination-span" style="padding-right: 20px; line-height: 32px; margin-left: 6px">
        共{{ total }}条记录
      </div>
      <div class="pagination-span" style="padding-right: 20px; line-height: 32px; margin-left: 6px">
        共{{ totalPages }}页
      </div>
    </div>

    <div>
      <el-pagination
        class="pagination2"
        v-model:current-page="currentPage"
        :page-sizes="pageSizes"
        v-model:page-size="pageSize"
        @size-change="handleSizeChange"
        layout="slot, prev, jumper, next"
        :total="total"
        style="display: inline-flex"
      >
        <template #default>
          <el-button
            class="pointer"
            @click="handleCurrentChange(1)"
            type="text"
            :disabled="currentPage === 1"
          >
            <el-icon><DArrowLeft /></el-icon>
          </el-button>
        </template>
      </el-pagination>
      <el-pagination
        class="pagination3"
        background
        v-model:current-page="currentPage"
        :page-sizes="pageSizes"
        v-model:page-size="pageSize"
        @size-change="handleSizeChange"
        layout="slot,sizes"
        :total="total"
        style="display: inline-flex"
      >
        <template #default>
          <el-button
            class="pointer margin-r-10 margin-l-16"
            @click="handleCurrentChange(totalPages)"
            type="text"
            :disabled="totalPages === currentPage"
          >
            <el-icon><DArrowRight /></el-icon>
          </el-button>
          <span class="single-page">每页显示</span>
        </template>
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUpdated } from 'vue'
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'

const props = defineProps({
  total: {
    required: true,
    type: Number,
  },
  hideTotal: {
    type: Boolean,
    default: false,
  },
  sizes: {
    type: Array,
  },
  totalPage: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['change'])

// 响应式变量
const totalPages = ref(0)
const currentPage = ref(1)
const pageSize = ref(null)

// 计算属性
const pageSizes = computed(() => {
  if (props.sizes) {
    return props.sizes
  } else {
    return [20, 50, 100, 200, 500, 1000]
  }
})

// 监听当前页码变化
watch(currentPage, (val) => {
  change(val, pageSize.value)
})

// 生命周期钩子
onMounted(() => {
  if (pageSizes.value.length > 0) {
    pageSize.value = pageSizes.value[0]
  } else {
    pageSize.value = 20
  }
})

onUpdated(() => {
  count()
})

// 方法
const handleSizeChange = (_pageSize) => {
  pageSize.value = _pageSize
  currentPage.value = 1
  change(currentPage.value, _pageSize)
}

const handleCurrentChange = (_currentPage) => {
  currentPage.value = _currentPage
}

const change = (pageNum, pageSize) => {
  const pageInfo = {
    pageNum: pageNum,
    pageSize: pageSize,
  }
  emit('change', pageInfo)
}

const setCurrentPage = () => {
  console.log('调用')
  currentPage.value = 1
  pageSize.value = 20
}

const setCurrentPage2 = () => {
  currentPage.value = 1
  pageSize.value = 10
}

const setCurrentPage3 = (pageNum, pageSize) => {
  currentPage.value = pageNum
  pageSize.value = pageSize
}

const count = () => {
  totalPages.value = Math.ceil(props.total / pageSize.value)
}

const setPageSize = (size) => {
  pageSize.value = size
}

// 暴露方法给父组件
defineExpose({
  setCurrentPage,
  setCurrentPage2,
  setCurrentPage3,
  setPageSize,
})
</script>

<style lang="scss" scoped>
.page-box {
  display: flex;
  margin-top: 10px;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

.pagination-span {
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: #999999;
  display: inline-block;
}

.el-pagination {
  display: inline-block;
  margin-bottom: 10px;
  padding-right: 0;
  font-size: 12px;

  :deep(.el-button--text) {
    color: #c0c4cc;
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    vertical-align: middle;
  }

  :deep(.el-pagination__sizes) {
    margin-left: 20px;
    margin-right: 0;
  }

  :deep(button) {
    background-color: transparent;
  }

  :deep(.el-input__inner) {
    width: 30px;
    color: #999;

    &:hover {
      border-color: #d7d7d7;
      opacity: 0.8;
    }
  }

  :deep(.el-select .el-input) {
    width: 93px;
    margin-right: 0;

    .el-input__inner {
      width: 93px;
    }
  }

  :deep(.el-icon-arrow-up) {
    &::before {
      content: '\e78f';
    }
  }

  :deep(.el-pager) {
    .number {
      background-color: rgba(250, 250, 250, 1);
      border: solid 1px rgba(226, 226, 226, 1);

      &:hover {
        color: rgba(105, 105, 116, 1);
        opacity: 0.8;
      }
    }

    .active {
      background-color: #aaaaaa;

      &:hover {
        color: rgba(255, 255, 255, 1);
        opacity: 0.8;
      }
    }

    .el-icon {
      background-color: rgba(250, 250, 250, 1);
      border: solid 1px rgba(226, 226, 226, 1);

      &:hover {
        color: rgba(105, 105, 116, 1);
        opacity: 0.8;
      }
    }
  }
}

:deep(.el-pagination__jump) {
  font-size: 12px;
  color: #999;
}

.single-page {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
}

.el-pagination :deep(.el-select) {
  width: 88px;
}

.el-pagination :deep(.el-select__wrapper) {
  border-radius: 0;
  border-color: #dcdfe6;
}

.el-pagination :deep(.el-select__placeholder) {
  font-size: 12px;
  color: #888888;
}

.pagination2 :deep(.el-pagination__editor) {
  width: 38px;
  height: 24px;
}

.pagination2 :deep(.el-input__wrapper) {
  border-radius: 0;
  border-color: #dcdfe6;
  padding: 0;
}
</style>
